@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);




input[type="text"] {
    height: 50px;
    font-size: 16px;
    display: inline-block;
    font-family: "Lato";
    font-weight: 100;
    border: none;
    outline: none;
    color: #333;
    padding: 3px;
    padding-right: 50px;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    z-index: 3;
    transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
    cursor: pointer;
}

input[type="text"]:focus:hover {
    border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
    /*width: 500px;*/
    width: 100%;
    z-index: 1;
    border-bottom: 1px solid #BBB;
    cursor: text;
}
input[type="submit"] {
    margin-top: 20px;
    height: 20px;
    width: 20px;
    display: inline-block;
    color:red;
    float: right;
    /*background: url() center center no-repeat;*/
    background: url(../img/search.png);
    text-indent: -10000px;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
    opacity: 0.8;
    cursor: pointer;
    transition: opacity .8s ease;
}

input[type="submit"]:hover {
    opacity: 0.8;
}

#search-li {
    width: 50%;
    float: right;
}

#wrap {
    /*margin: 50px 100px;*/
    margin: 0px 20px;
    /*display: inline-block;*/
    /*position: relative;*/
    height: 50px;
    float: right;
    padding: 0;
}